<%-- 
    Document   : musicplayer
    Created on : Apr 1, 2013, 12:52:00 AM
    Author     : NoiR
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Music Player</title>
        <link href="css/player.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="js/player.js"></script>
        <script type="text/javascript">
            
        </script>
    </head>
    <body>
        <!-- Include TOP  -->
        <%@include file="masterpage_top.jsp" %>
        <!-- MAIN CONTENT  -->
        <div id="middle">
            <div id="middle_content">
                <div id="information">
                </div>
                <div id="player_div">
                    <div id="player">
                    </div>
                    <div id="controls">
                        <div id="progress_bar">
                            <canvas id="canvas" width="200" height="20">
                                canvas is not supported.
                            </canvas>
                        </div>
                        <button id="rewind" class="btnBack"
                                style="background-image: url(img/mp-back.png); width: 48px; height: 48px;"
                                onclick="rewindAudio()"></button>
                        <button id="play_control" class="btnPlayPause" style="background-image: url(img/mp-play.png); width: 48px; height: 48px;" title="play"
                                onclick="tooglePlayPause()"></button>
                        <button id="forward" class="btnNext"
                                style="background-image: url(img/mp-next.png); width: 48px; height: 48px;"
                                onclick="forwardAudio()"></button>

                        <div id="mute">
                            <button id="mute" class="btnVolume"
                                    style="background-image: url(img/mp-volume.png); width: 48px; height: 48px;"
                                    onclick="toogleMute()"></button>
                            <input id="volume" min="0" max="1"
                                   step="0.1" type="range"
                                   onchange="setVolume()"/>
                        </div>

                    </div>
                    <div id="list_song">
                        <ul id="playlist">
                            <li><a href="#" onclick="changeSource('${pageContext.request.contextPath}/Shake Up Christmas.mp3');">Shake Up Christmas</a></li>
                            <li><a href="#" onclick="changeSource('${pageContext.request.contextPath}/Standing In The Dark.mp3');">Standing In The Dark</a></li>
                        </ul>
                    </div>
                </div>

                <div id="lyrics"></div>
            </div>
        </div>
        <script type="text/javascript">
            var id = '${param.id}';
            var type = '${param.type}';
            
            Initilize(id,type,'${pageContext.request.contextPath}');
        </script>
        <!-- Include BOTTOM  -->
        <%@include file="masterpage_bottom.jsp" %>
    </body>
</html>
